<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题</title>
</head>
<body>
    <a href="demo1.html"target="_blank">demo1的传送门</a>
        <!-- 禁止跳转 -->
    <a href="#"></a>
    <!-- style里面就是写CSS代码的 -->
    <style>
        td{
            text-align:center;
        }
    </style>
    <!-- 创建一个表格 -->
    <table width="500px"height="500px"border="1px"cellspacing="0">
        <!-- tr表示表格的一行 -->
        <tr>
            <!-- td表示一行中的单元格 -->
            <!-- th表示表头单元格 -->
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>19</td>
        </tr>
    </table>
            <!-- 有序列表 -->
            <ol>
                <li>吃饭</li>
                <li>睡觉</li>
                <li>打豆豆</li>
            </ol>
            <!-- 无序列表 -->
            <ul>
                <li>吃饭</li>
                <li>睡觉</li>
                <li>打豆豆</li>
            </ul>
            <!-- 自定义列表 -->
            <dl>
                <dt>我要干啥</dt>
                <dd>吃饭</dd>
                <dd>睡觉</dd>
                <dd>打豆豆</dd>
            </dl>

            <!-- 表单 -->
            <form action="https://baidu.com">
                <!-- 单行文本框 -->
                <input type="text">
                <br>
                <!-- 单行密码框 -->
                <input type="password">
                <br>
                <!-- 单选框 -->
                <!-- 多个单选框用name来关联 -->
                <input type="radio"name="gender"checked="checked">男
                <br>
                <input type="radio"name="gender">女
                <br>
                <!-- 复选框 -->
                <input type="checkbox"> 吃饭
                <input type="checkbox"> 睡觉
                <input type="checkbox"> 打豆豆
                <br>
                <!-- 普通按钮 -->
                <input type="button" value="这是一个按钮"onclick="alert('hello')">
                <br>
                <!-- 提交按钮 -->
                <input type="text"name="key">
                <input type="submit" value="提交">
                <!-- 清空按钮 -->
                <input type="reset"value="清空">
                <br>
                <!-- 8.选择文件 -->
                <input type="file">
                <br>
                <!-- label搭配单选框或者复选框使用 -->
                <input type="radio" name="gender" id="male"><label for="male">男</label>
                <input type="radio" name="gender" id="female"><label for="female">女</label>
                <input type="radio" name="gender" id="unknown"><label for="unknown">不显示</label>
                <br/>
                <select>
                    <option>北京</option>
                    <option selected="selected">上海</option>
                    <option>广州</option>
                    <option>深圳</option>
                </select>
                <br>
                <select>
                    <option>--选择你的出生年份--</option>
                    <option>1999</option>
                    <option>2000</option>
                    <option>2001</option>
                    <option>2002</option>
                    <option>2003</option>
                </select>
                <br>
                请填写你的详细地址<br>
                <textarea cols="30" rows="10"></textarea>
        </form>
        <!-- 以上都为有语义标签 -->

        <!-- 无语义标签 -->
        <!-- 大部分标签都可以使用div&span来代替
             div和span往往是用来针对页面结构进行布局的
             div可以视为是一个独占一行的"大盒子"
            span可以视为是一个不独占一行的"小盒子" -->
        <div>
            <span>星无</span>
            <span>原神</span>
            <span>崩坏3</span>
        </div>
        <div>
            <span>Liyuu</span>
            <span>Liyuu</span>
            <span>Liyuu</span>
        </div>
        <div>
            <span>唐可可</span>
            <span>唐可可</span>
            <span>唐可可</span>
        </div>
</body>
</html>